<template>
  <div class="detail-shop">
    <div class="shop-info">
      <img :src="shop.shopLogo" alt />
      <span>{{shop.name}}</span>
    </div>
    <div class="sells">
      <div class="sells-left">
        <div class="sells-left-info">
          {{cell}}万
          <br />
          <span>总销量</span>
        </div>
        <div class="sells-left-info">
          {{shop.cGoods}}
          <br />
          <span>全部宝贝</span>
        </div>
      </div>
      <div class="sells-right">
        <div v-for="item in shop.score" :key="item.index" class="sells-right-item">
          <span>{{item.name}}</span>
          <span>{{item.score}}</span>
          <span v-if="item.isBetter" class="score-better">高</span>
          <span v-else class="score-lower">低</span>
        </div>
      </div>
    </div>
    <div class="into-shop">进店逛逛</div>
  </div>
</template>

<script>
export default {
  props: {
    shop: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  computed: {
    cell() {
      return (this.shop.cSells - (this.shop.cSells % 1000)) / 10000;
    }
  }
};
</script>


<style scoped>
.detail-shop {
  padding: 20px 8px;
  border-top: 5px solid #e6e6e6;
  border-bottom: 5px solid #e6e6e6;
}

.shop-info {
  display: flex;
  align-items: center;
}

.shop-info img {
  border: 1px solid #ccc;
  border-radius: 50%;
  width: 30px;
}

.shop-info span {
  margin-left: 5px;
  font-size: 15px;
}

.sells {
  margin: 20px 10px;
  display: flex;
  align-items: center;
}

.sells-left,.sells-right {
  flex: 1;
}

.sells-left {
  display: flex;
  text-align: center;
  font-size: 16px;
}

.sells-left-info {
  flex: 1;
  font-size: 16px;
  color: #000;
}

.sells-left-info span {
  font-size: 12px;
}

.sells-left-info:nth-child(2) {
  border-right: 2px solid #ccc;
}

.sells-right {
  font-size: 14px;
  color: #000;
}

.sells-right-item {
  display: flex;
  height: 30px;
  padding: 5px 0;
  line-height: 20px;
  text-align: center;
}

.sells-right-item span:nth-child(1) {
  flex: 7;
}

.sells-right-item span:nth-child(2) {
  text-align: left;
  flex: 3;
}

.score-better {
  flex: 1;
  background-color: red;
  color: #fff;
  padding: 0 2px;
}

.score-lower {
  background-color: green;
  color: #fff;
  padding: 1px 2px;
}

.into-shop {
  width: 33.33%;
  padding: 5px;
  text-align: center;
  background-color: #eee;  
  margin: 10px auto;
  border-radius: 5px;
}
</style>